<template>
	<view class="content">
		<view class="all">
			<view class="left">用户名</view>
			<input v-model="input1" type="text" placeholder="请输入用户名" />
		</view>
		<view class="all">
			<view class="left">密 码</view>
			<input v-model="input2" type="text" :password="isPassword" placeholder="请输入密码" />
			<view @click="see">
				可见密码
			</view>
		</view>
		<view class="all">
			<view class="left">手机号</view>
			<input v-model="input3" type="number" placeholder="请输入手机号" />
		</view>

		<view class="sex">

			<radio-group >
				<label>
					<radio :value="r1" :checked="true" />男
				</label>
				<label>
					<radio :value="r2" />女
				</label>
			</radio-group>


		</view>
		<view class="three">


			<view class="get" @tap="getCheckNum()">
				<text>{{!codeTime?'获取验证码':codeTime+'s'}}</text>
			</view>
			<view class="all">
				<view class="left">验证码</view>
				<input v-model="myNum" placeholder="请输入验证码" type="number" />
			</view>
		</view>
		<button class="but" type="primary" plain="true" @click="go()">确定</button>
		<view class="number" v-if="isShow">
			<text>{{number}}</text>

		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				input1: "",
				input2: "",
				input3: "",
				isPassword: true,
				password: /^(?=.*[0-9])(?=.*[a-zA-Z])(?=.*[!@#$\%\^\&\*\(\)])[0-9a-zA-Z!@#$\%\^\&\*\(\)]{8,16}/,
				codeTime: 0,
				number: '',
				myNum: '',
				isShow: false,
			}
		},
		onLoad() {

		},
		methods: {

			go: function() {
				let judge = this.password.test(this.input2)
				if (this.input1 !== "") {
					if (judge) {
						if (this.input3.length == 11) {
							if (this.myNum == this.number && this.myNum !== "") {
								uni.showToast({
									title: "注册成功",
									icon: 'closeempty',
									duration: 1000
								});
							} else {
								uni.showToast({
									title: "输入正确的验证码",
									icon: 'none',
									duration: 1000
								});
							}
						} else {
							uni.showToast({
								title: "输入正确的手机号",
								icon: 'none',
								duration: 1000
							});
						}

					} else {
						uni.showToast({
							title: "输入正确的密码",
							icon: 'none',
							duration: 1000
						});
					}
				} else {
					uni.showToast({
						title: "请输入用户名",
						icon: 'none',
						duration: 1000
					});
				}

				console.log(this.input1, this.input2, this.input3)
			},
			see: function() {
				console.log(this.isPassword)
				this.isPassword = !this.isPassword
			},
			getCheckNum() {
				if (this.codeTime > 0) {
					uni.showToast({
						title: '不能重复获取',
						icon: "none"
					});
					return;
				} else {
					this.isShow = true
					this.number = parseInt(Math.random() * (9999 - 1000) + 1000)
					this.myNum = ""
					this.codeTime = 60
					let timer = setInterval(() => {
						this.codeTime--;
						if (this.codeTime < 1) {
							clearInterval(timer);
							this.codeTime = 0
							this.isShow = false
						}
					}, 1000)
				}
			}
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin: 30rpx;
		border-bottom: 2rpx solid #EEEEEE;
		flex-wrap: nowrap;
	}

	.three {
		background-color: white;
		width: 92%;
		border-radius: 10rpx;
		padding: 20rpx 0;
		margin: 20rpx auto;
		position: relative;
	}

	.all {
		width: 75%;
		margin: 30rpx;
		border-bottom: 2rpx solid #EEEEEE;
		display: flex;
		flex-wrap: nowrap;
	}

	.left {
		margin-bottom: 30rpx;
		margin-right: 40rpx;
		width: 150rpx;
	}

	.get {

		position: absolute;
		top: 40rpx;
		right: -20rpx;
		font-size: 26rpx;
		background-color: orange;
		height: 70rpx;
		line-height: 70rpx;
		color: white;
		border-radius: 10rpx;
		padding: 0 20rpx;
	}

	.password {
		display: flex;

	}

	.but {
		width: 80%;
	}

	.number {
		width: 100rpx;
		height: 100rpx;

	}
</style>
